跑在浏览器上的小程序 IDE

在过去的一年里，支付宝小程序 IDE 团队作为共建的一份子加入到了开天 IDE 框架的开发中，随着开天框架逐渐成熟，去年年底我们把小程序开发者工具全面升级到了开天内核。在小程序开发者工具与开天 IDE 框架完成融合后，我们尝试把小程序开发者工具搬到了浏览器中...

本文向大家介绍我们怎样借助开天 IDE 框架把小程序开发者工具跑在浏览器中，小程序 WebIDE 背后都做了些什么。

场景梳理

MiniCode IDE

在小程序开发者工具中我们支持了非常丰富且复杂的小程序研发能力，在把它们搬上浏览器之前，我们首先对 WebIDE 的方向做了些思考：

• 希望开发者能够在 WebIDE 中完成「研发并上线一个小程序」的全部流程，但不希望 WebIDE 变得和客户端一样庞大

• 希望 WebIDE 能够和客户端形成能力互补，完成一些客户端难以完成的场景（比如分享与传播）

• 希望 WebIDE 和客户端在底层技术上是互通的，不要产生技术上的分化

基于这些思考，我们从小程序开发者工具中抽取出了一条主要的研发链路，在 WebIDE 中实现：创建/管理项目 -> 编辑代码 -> 模拟器预览与调试 -> 真机调试 -> 真机预览 -> 上传提审。

整体架构

整体上主要分成了两部分：

• 应用服务器 MiniAppWeb，它负责管理用户和 IDE 实例之间的关系以及 IDE 的生命周期，这部分细节不赘述

• IDE 容器 MiniCode，它是基于开天框架 IDE 的本体，部署在阿里云 k8s 集群中，我们主要介绍这部分

启动流程

在介绍细节前，我们先来看一下一次完整的 IDE 启动流程（简化版）：

在整个启动流程中，耗时最严重的是「创建 MiniCode 容器」这一步，冷启动耗时大约在 10 秒左右。为了优化这一启动时间，我们将用户状态的载入后置到「MiniCode 加载工作空间代码」这一步，同时在集群中预热一批无状态的 MiniCode 容器，把「创建 MiniCode 容器并启动」转换为了「从预热池中选择闲置的 MiniCode 容器」，极大幅度降低了启动耗时。

目前一次全新的 IDE 启动在命中预热容器的情况下仅耗时 3 秒左右。

IDE Server & Exexutable

IDE Server 以 Koa 为载体运行了开天 IDE 框架，在开天框架中，我们扩展了 MiniProgram 模块、Project 模块等用于对小程序研发场景进行 UI 适配、流程组装、提供相应的项目管理能力等。MiniCode IDE 中的 Toolbar、项目信息等由这些模块完成。

Executable 是由 MiniCode 容器提供的一系列管理脚本，供 MiniAppWeb 通过远程调用的方式执行，用于运行过程中从外部介入容器进行操作。「启动流程」中介绍的「加载工作空间代码」、「启动 MiniCode IDE 服务」均由这些脚本提供。

MiniCode 插件

真正的小程序研发能力被分解成了一些独立的开天 IDE 插件：

• minicode-basis：提供小程序基础服务

• minicode-compile：提供小程序编译相关服务，包括 DevServer、真机调试、真机预览构建等

• minicode-simulator：提供小程序模拟器相关服务

• minicode-devtool：提供小程序调试器相关服务

它们分别以 command 的形式提供了独立的接口供外部调用，比如：

1. import { commands } from 'kaitian';

2. // 启动小程序构建 DevServer

3. commands.executeCommand('mini-program.compile.startDevServer');

4. // 启动并打开模拟器

5. commands.executeCommand('mini-program.simulator.open');

6. // 打开真机调试

7. commands.executeCommand('mini-program.devtools.openRemoteDebug');

compile/simulator/devtool 相互之间独立且仅和 basis 耦合，它们既可以作为一个 Extension Pack 整体来提供全部的小程序研发能力，又可以分别启用以提供特定的功能。

MiniCode 插件的分层设计以及以 command 形式提供接口的方式为它带来了对开天 IDE 框架优秀的兼容能力，任何使用开天 IDE 框架构建的 IDE 产品均可通过集成 MiniCode 插件的方式方便地接入小程序研发，比如蚂蚁内部 Cloud IDE 近期通过这种方式接入了小程序技术栈：

业务落地

技术上完成了预设的场景后，我们开始尝试把小程序 WebIDE 在一些业务场景落地，比如：

增加便捷入口

在小程序文档、开放平台等多处部署了不同的入口，让小程序开发的开发者可以随时点开 WebIDE 体验小程序开发、修改自己的代码。

分享项目

一键给自己的项目创建分享链接，快速分享自己的代码给他人。

未来

小程序 WebIDE 还在起步阶段，目前仅仅做到了完成小程序研发生命周期的全流程，但并不够好用。

比如，出于阿里云集群容量考虑，小程序 WebIDE 现在要求用户登录之后才能使用，这在一定程度上让「项目分享」这样的功能变得鸡肋了些：我们总不能指望点开分享链接的人会去登录一次吧。

未来我们会继续探索 Web 上轻量化研发的场景：通过一个比 WebIDE 更加轻量的小程序 Playground，让小程序分享变得更加简单；通过 Playground、WebIDE、客户端 IDE 等产品的联动，让开发小程序更加高效和有趣。

最后，感谢阅读，欢迎体验小程序 WebIDE：https://minicode.alipay.com/。

---

你可能还喜欢👇👇

---

关注「Alibaba F2E」

把握阿里巴巴前端新动向